<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="priceSearch" :inline="true" size="mini">
                <el-form-item label="城市：">
                    <el-input v-model="priceSearch.city" clearable placeholder="请输入搜索的城市名称"></el-input>
                </el-form-item>
                <!-- <el-form-item label="店铺名：">
                    <el-input v-model="priceSearch.storeName" clearable placeholder="请输入店铺名"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn" v-if="jurisdiction.add_state === 1">
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
        </div>
        <span v-else></span>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="priceTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="80px"></el-table-column> -->
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <!-- <el-table-column label="设备号" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.equipmentNumber }}</span>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="店员数量" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.clerkNumber }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="城市" width="220px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.city }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="普通小汽车" width="180px">
                    <template slot-scope="scope">
                        <div class="slot-scope">
                            <span>精洗价：{{ scope.row.car_fine }}元</span><br>
                            <span>快洗价：{{ scope.row.car_fast }}元</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="运营小汽车" width="180px">
                    <template slot-scope="scope">
                        <div class="slot-scope">
                            <span>精洗价：{{ scope.row.car_fine_run }}元</span><br>
                            <span>快洗价：{{ scope.row.car_fast_run }}元</span>
                        </div>
                    </template>
                </el-table-column>
                
                <el-table-column label="普通SUV" width="180px">
                    <template slot-scope="scope">
                        <div class="slot-scope">
                            <span>精洗价：{{ scope.row.suv_fine }}元</span><br>
                            <span>快洗价：{{ scope.row.suv_fast }}元</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="运营SUV" width="180px">
                    <template slot-scope="scope">
                        <div class="slot-scope">
                            <span>精洗价：{{ scope.row.suv_fine_run }}元</span><br>
                            <span>快洗价：{{ scope.row.suv_fast_run }}元</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="普通MPV" width="180px">
                    <template slot-scope="scope">
                        <div class="slot-scope">
                            <span>精洗价：{{ scope.row.mpv_fine }}元</span><br>
                            <span>快洗价：{{ scope.row.mpv_fast }}元</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="运营MPV" width="180px">
                    <template slot-scope="scope">
                        <div class="slot-scope">
                            <span>精洗价：{{ scope.row.mpv_fine_run }}元</span><br>
                            <span>快洗价：{{ scope.row.mpv_fast_run }}元</span>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="普通洗价格" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.fastPrice }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="精洗价格" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.exquisitePrice }}元</span>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="精洗(小汽车)" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.carPrice }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="精洗(SUV)" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.suvPrice }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="精洗(MPV)" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.mpvPrice }}元</span>
                    </template>
                </el-table-column> remove-->
                <el-table-column label="操作" width="200px" v-if="jurisdiction.update_state === 1 || jurisdiction.delete_state === 1 ">
                    <template slot-scope="scope">
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            v-if="jurisdiction.delete_state === 1"
                            size="small"
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <!-- 添加的弹出层 -->
            <el-dialog
                title="添加价格方案"
                width="50%"
                :visible.sync="addVisible"
                center
                top="50px"
                @close="closeadd"
            >
                <el-form :model="addPrice" ref="editProduct">
                    <el-form-item label="城市：" label-width="60px">
                        <el-select v-model="addPrice.city" @change="verifycity()">
                            <el-option v-for="item in cityname" :key="item.id" :label="item.city" :value="item.city"></el-option>
                        </el-select>
                    </el-form-item>

                    <div class="flex">
                        <!-- <p class="pl5 f16 b00a">普通小汽车</p> -->
                        <el-form-item label="普通小汽车" label-width="90px">
                            <!-- <el-col :span="12"> -->
                                <el-form-item label="精洗" :label-width="formLabelWidth">
                                    <el-input v-model="addPrice.car_fine" placeholder="普通小车精洗价"></el-input>
                                </el-form-item>
                            <!-- </el-col> -->
                            <!-- <el-col :span="12"> -->
                                <el-form-item label="快洗" :label-width="formLabelWidth">
                                    <el-input v-model="addPrice.car_fast" placeholder="普通小车快洗价"></el-input>
                                </el-form-item>
                            <!-- </el-col> -->
                        </el-form-item>
                        
                        <!-- <p class="pl5 f16 b00a">运营小汽车</p> -->
                        <el-form-item label="运营小汽车" label-width="90px">
                            <!-- <el-col :span="12" class="pr5"> -->
                                <el-form-item label="精洗" :label-width="formLabelWidth">
                                    <el-input v-model="addPrice.car_fine_run" placeholder="运营小车精洗价"></el-input>
                                </el-form-item>
                            <!-- </el-col> -->
                            <!-- <el-col :span="12" class="pl5"> -->
                                <el-form-item label="快洗" :label-width="formLabelWidth">
                                    <el-input v-model="addPrice.car_fast_run" placeholder="运营小车快洗价"></el-input>
                                </el-form-item>
                            <!-- </el-col> -->
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <!-- <p class="pl5 f16 b00a">普通SUV</p> -->
                        <el-form-item label="普通SUV" label-width="90px">
                            <el-form-item label="精洗" :label-width="formLabelWidth">
                                <el-input v-model="addPrice.suv_fine" placeholder="普通SUV精洗价"></el-input>
                            </el-form-item>
                            <el-form-item label="快洗" :label-width="formLabelWidth">
                                <el-input v-model="addPrice.suv_fast" placeholder="普通SUV快洗价"></el-input>
                            </el-form-item>
                        </el-form-item>

                        <!-- <p class="pl5 f16 b00a">运营SUV</p> -->
                        <el-form-item label="运营SUV" label-width="90px">
                            <el-form-item label="精洗" :label-width="formLabelWidth">
                                <el-input v-model="addPrice.suv_fine_run" placeholder="运营SUV精洗价"></el-input>
                            </el-form-item>
                            <el-form-item label="快洗" :label-width="formLabelWidth">
                                <el-input v-model="addPrice.suv_fast_run" placeholder="运营SUV快洗价"></el-input>
                            </el-form-item>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="普通MPV" label-width="90px">
                            <el-form-item label="精洗" :label-width="formLabelWidth">
                                <el-input v-model="addPrice.mpv_fine" placeholder="普通MPV精洗价"></el-input>
                            </el-form-item>
                            <el-form-item label="快洗" :label-width="formLabelWidth">
                                <el-input v-model="addPrice.mpv_fast" placeholder="普通MPV快洗价"></el-input>
                            </el-form-item>
                        </el-form-item>

                        <!-- <p class="pl5 f16 b00a">运营MPV</p> -->
                        <el-form-item label="运营MPV" label-width="90px">
                            <el-form-item label="精洗" :label-width="formLabelWidth">
                                <el-input v-model="addPrice.mpv_fine_run" placeholder="运营MPV精洗价"></el-input>
                            </el-form-item>
                            <el-form-item label="快洗" :label-width="formLabelWidth">
                                <el-input v-model="addPrice.mpv_fast_run" placeholder="运营MPV快洗价"></el-input>
                            </el-form-item>
                        </el-form-item>
                    </div>

                </el-form>
                <div slot="footer">
                    <el-button @click="cancelAdd" size="mini">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd" :disabled="verifystate" size="mini">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改/查看对话框 -->
            <el-dialog
                title="修改/查看"
                width="50%"
                :visible.sync="editVisible"
                center
                top="50px"
                @close="closeBrowse"
            >
                <el-form :model="editPrice" ref="editProduct">
                    <!-- <el-form-item label="城市：" :label-width="formLabelWidth">
                        <el-select v-model="editPrice.city">
                            <el-option v-for="item in cityname" :key="item.id" :label="item.city" :value="item.city"></el-option>
                        </el-select>
                    </el-form-item> -->

                    <div class="flex">
                        <el-form-item label="运营小汽车" label-width="90px">
                            <el-form-item label="精洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.car_fine" placeholder="普通小车精洗价"></el-input>
                            </el-form-item>
                            <el-form-item label="快洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.car_fast" placeholder="普通小车快洗价"></el-input>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="运营小汽车" label-width="90px">
                            <el-form-item label="精洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.car_fine_run" placeholder="运营小车精洗价"></el-input>
                            </el-form-item>
                            <el-form-item label="快洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.car_fast_run" placeholder="运营小车快洗价"></el-input>
                            </el-form-item>
                        </el-form-item>
                    </div>

                    <div class="flex">
                        <el-form-item label="普通SUV" label-width="90px">
                            <el-form-item label="精洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.suv_fine" placeholder="普通SUV精洗价"></el-input>
                            </el-form-item>
                            <el-form-item label="快洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.suv_fast" placeholder="普通SUV快洗价"></el-input>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="运营SUV" label-width="90px">
                            <el-form-item label="精洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.suv_fine_run" placeholder="运营SUV精洗价"></el-input>
                            </el-form-item>
                            <el-form-item label="快洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.suv_fast_run" placeholder="运营SUV快洗价"></el-input>
                            </el-form-item>
                        </el-form-item>
                    </div>

                    <div class="flex">
                        <el-form-item label="普通MPV" label-width="90px">
                            <el-form-item label="精洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.mpv_fine" placeholder="普通MPV精洗价"></el-input>
                            </el-form-item>
                            <el-form-item label="快洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.mpv_fast" placeholder="普通MPV快洗价"></el-input>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="运营MPV" label-width="90px">
                            <el-form-item label="精洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.mpv_fine_run" placeholder="运营MPV精洗价"></el-input>
                            </el-form-item>
                            <el-form-item label="快洗" :label-width="formLabelWidth">
                                <el-input v-model="editPrice.mpv_fast_run" placeholder="运营MPV快洗价"></el-input>
                            </el-form-item>
                        </el-form-item>
                    </div>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelModify">取 消</el-button>
                    <el-button type="primary" @click="confirmModify">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            addVisible: false, //添加的弹出层
            editVisible: false, //修改/查看对话框
            formLabelWidth: "40px", //对话框的标签宽度
            cityname: '',
            verifystate: true,
            addPrice: {
                // 添加对话框
                car_fine:"",
                car_fast:"",
                car_fine_run:"",
                car_fast_run:"",
                suv_fine:"",
                suv_fast:"",
                suv_fine_run:"",	
                suv_fast_run:"",
                mpv_fine:"",
                mpv_fast:"",	
                mpv_fine_run:"",	
                mpv_fast_run:"",
                city:""
            },
            editPrice: {
                // 修改对话框
                id: "",
                car_fine:"",
                car_fast:"",
                car_fine_run:"",
                car_fast_run:"",
                suv_fine:"",
                suv_fast:"",
                suv_fine_run:"",	
                suv_fast_run:"",
                mpv_fine:"",
                mpv_fast:"",	
                mpv_fine_run:"",	
                mpv_fast_run:"",
                // city:""
            },
            priceSearch: {
                //搜索、
                city: ""
                // equipmentNumber: "", //设备号
                // storeName: "" //店铺名
            },
            priceTable: [
                {
                    storeId: 1, //店铺id,一台设备一个店铺
                    equipmentNumber: "123", //设备号
                    // clerkNumber: item.clerkNum, //店员数量
                    storeName: "深圳店", //门店名称
                    storeAdress: "深圳福田", //门店地址
                    carPrice: "10", //小汽车精洗价格
                    suvPrice: "15", //SUV精洗价格
                    mpvPrice: "20" //MPV精洗价格
                },
                {
                    storeId: 1, //店铺id,一台设备一个店铺
                    equipmentNumber: "123", //设备号
                    // clerkNumber: item.clerkNum, //店员数量
                    storeName: "深圳店", //门店名称
                    storeAdress: "深圳福田", //门店地址
                    carPrice: "10", //小汽车精洗价格
                    suvPrice: "15", //SUV精洗价格
                    mpvPrice: "20" //MPV精洗价格
                },
                {
                    storeId: 1, //店铺id,一台设备一个店铺
                    equipmentNumber: "123", //设备号
                    // clerkNumber: item.clerkNum, //店员数量
                    storeName: "深圳店", //门店名称
                    storeAdress: "深圳福田", //门店地址
                    carPrice: "10", //小汽车精洗价格
                    suvPrice: "15", //SUV精洗价格
                    mpvPrice: "20" //MPV精洗价格
                },
                {
                    storeId: 1, //店铺id,一台设备一个店铺
                    equipmentNumber: "123", //设备号
                    // clerkNumber: item.clerkNum, //店员数量
                    storeName: "深圳店", //门店名称
                    storeAdress: "深圳福田", //门店地址
                    carPrice: "10", //小汽车精洗价格
                    suvPrice: "15", //SUV精洗价格
                    mpvPrice: "20" //MPV精洗价格
                }
            ]
        };
    },
    methods: {
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount,city:this.priceSearch.city};
            for(var i in data) data[i] === "" ? delete data[i] : "";
            // console.log(data)
            utils.request("/pricePlan/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp);
                this.priceTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
                if(num === 2){
                    resp.data.data.total 
                    ? this.$message({
                        message: "找到"+resp.data.data.total+"条数据",
                        type: "success"
                    }) : this.$message("没有符合条件的数据");
                }else{return}
            })
        },
        
        remove(index,row){
            // 删除
            
             this.$confirm('此操作将永久删除定价方案, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                utils.request("/pricePlan/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                    console.log(resp);
                    if(resp.data.code === 200 && resp.data.message === "信息请求成功"){
                        this.priceTable.splice(index,1)      
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{this.$message.error("删除失败！刷新页面或重新登录再修改")}
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        add(){
            this.addVisible = true;
        },
        confirmAdd(){
            // 添加确认
            console.log(this.addPrice)
            this.addVisible = false;
            let data = JSON.parse(JSON.stringify(this.addPrice))
            for(var i in this.addPrice) this.addPrice[i] = "";
            
            utils.request("/pricePlan/add","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                data.id = resp.data.data.data;
                this.priceTable.length < this.currentCount ? this.priceTable.push(data) : "";
                this.$message({
                    message: "价格方案添加成功！",
                    type: "success"
                })
            })
        },
        cancelAdd(){
            // 添加取消
            this.addVisible = false;
            for(var i in this.addPrice) this.addPrice[i] = "";
        },
        closeadd(){
            // 添加的关闭
            this.addVisible = false;
            for(var i in this.addPrice) this.addPrice[i] = "";
        },
        edit(index, row) {
            // 修改
            console.log(row);
            // this.$router.push({ path: "/editPrice", query: { row: row } });
            for(var i in this.editPrice) this.editPrice[i] = row[i];
            this.editPrice.index = index;
            console.log(this.editPrice)
            this.editVisible = true;
            // this.editPrice.storeId = row.storeId;
            // this.editPrice.fastPrice = row.fastPrice; //普通洗
            // this.editPrice.exquisitePrice = row.exquisitePrice; //精洗
            // this.editPrice.carPrice = row.carPrice; //精洗(小汽车)
            // this.editPrice.suvPrice = row.suvPrice; //精洗(SUV)
            // this.editPrice.mpvPrice = row.mpvPrice; //精洗(MPV)
        },
        confirmModify() {
            // 确认对话框:需要手机验证
            let data = {}
            for(var i in this.editPrice) this.editPrice[i] !== "" && i!=="index" ? data[i] = this.editPrice[i] : "";
            utils.request("/pricePlan/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.editVisible = false;
                if(resp.data.code === 200 && resp.data.message === "信息请求成功"){
                    let key = this.editPrice.index
                    this.priceTable.splice(key,1,data)
                    this.$message({
                        message: "修改成功",
                        type: "success"
                    })
                }else{
                    this.$message.error("修改失败！刷新页面或重新登录再修改")
                }
                
            })
            // utils
            //     .request("store", "put", {
            //         storeId: this.editPrice.storeId, //店铺id
            //         onePrice: this.editPrice.fastPrice, //普通洗价格
            //         twoPrice: this.editPrice.exquisitePrice //精洗价格
            //     })
            //     .then(res => {
                //     console.log(res);
                //     if (res.data.code === 20000) {
                //         this.$message({
                //             type: "success",
                //             message: "修改成功!"
                //         });
                //         this.editVisible = false;
                //         this.editPrice.fastPrice = "";
                //         this.editPrice.exquisitePrice = "";
                //         this.searchClick();
                //     } else if (res.data.code === 20004) {
                //         this.$message({
                //             type: "error",
                //             message: "请重新登录！"
                //         });
                //         this.$router.push("/");
                //     } else if (res.data.code === 20005) {
                //         this.$message({
                //             type: "error",
                //             message: res.data.msg
                //         });
                //     }
                // });
        },
        cancelModify() {
            // 取消对话框
            this.editVisible = false;
            this.editPrice.fastPrice = "";
            this.editPrice.exquisitePrice = "";
            this.editPrice.carPrice = "";
            this.editPrice.suvPrice = "";
            this.editPrice.mpvPrice = "";
        },
        verifycity(){
            // 添加城市的重复验证
            utils.request("/pricePlan/list","post",JSON.stringify({page:1,list_rows:10,city:this.addPrice.city})).then(resp=>{
                console.log(resp)
                if(resp.data.data.data.length !== 0){
                    this.$message.error("该城市已存在价格方案，请重新选择")
                    this.verifystate = true;
                }else{
                    this.$message({
                        message: "该城市暂无价格方案，可以添加",
                        type: "success"
                    })
                    this.verifystate = false;
                }
            })
        },
        closeBrowse() {
            // 关闭对话框
            this.editPrice.fastPrice = "";
            this.editPrice.exquisitePrice = "";
            this.editPrice.carPrice = "";
            this.editPrice.suvPrice = "";
            this.editPrice.mpvPrice = "";
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick()
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick()
        }
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        let data = {page:this.currentPage,list_rows:this.currentCount};
        utils.request("/pricePlan/list","post",JSON.stringify(data)).then(resp=>{
            console.log(resp);
            this.priceTable = resp.data.data.data;
        })
        utils.request("/city/list","post",JSON.stringify({page:1,list_rows:999999999})).then(resp=>{
            console.log(resp)
            this.cityname = resp.data.data.data;
        })
    }
};
</script>
<style lang="scss" scoped>
/* 列表 */
/* .slot-scope{
    height: 60px;
    line-height: 20px;
} */
/* 弹出层 */
.flex,.flex-detail{
    display: flex;
    flex-flow: row wrap;
}
.flex-detail .el-form-item{
    width: 50%;
}
</style>
